<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="js/jquery-1.11.0.min.js" ></script>

	<script>

		function reg(){
			//前端校验
			var username=$("#username").val()
			var password=$("#password").val()
			var password2=$("#password2").val()
			var realName=$("#realName").val() //通过jquery方式获取 realName控件的值

			if(username===''){
				//console.log("用户名不能为空！")
				$("#msg").html("用户名不能为空！")
				$("#username").focus()
				return;
			}
			if(realName === ''){
				$("#msg").html("真实姓名不能为空！")
				$("#realName").focus() //设置该控件获取焦点
				return;
			}
			if(password===''){
				$("#msg").html("密码不能为空！")
				$("#password").focus()
				return;
			}
			console.log("password2:",password2)
			console.log("password2===''：：：",password2==='')
			if(password2===''){
				$("#msg").html("确认密码不能为空！")
				$("#password2").focus()
				return;
			}
			if(password != password2){
				$("#msg").html("密码和确认密码必须一致，重新填写！")
				$("#password").focus()
				return;
			}

			$("#msg").html("") // 需要传入 ""，表示空值

			/*
            * 获取 input标签、type是radio，那么是sex，并且是选中的 控件的值
            */
			var sex=$("input:radio[name='sex']:checked").val()

			var phone=$("#phone").val()


			console.log( "phone：", phone)
			console.log( "性别：", sex)

			var likeArray =[];// 定义数组
			//获取 input 标签，name是likes，并且是选中的元素
			$('input[name="likes"]:checked').each(function(){
				likeArray.push($(this).val());//将选中的值，放入到数组中
			});
			//将数组转换成 由 , 分割的字符串
			// 例子：wzry,cj
			var likes=likeArray.join(",")

			console.log(likes)

			var jiguan=$("#jiguan").val()
			console.log("籍贯：",jiguan)

			var jieshao=$("#jieshao").val()
			console.log("介绍：",jieshao)


			$.ajax({
				url:'reg',
				type:'post', //请求方式，GET或POST
				data:{ //要提交给服务器的数据
					username : username,
					realName : realName,
					"password" : password,
					"password2" : password2,
					sex:sex,
					phone:phone,
					likes:likes,
					jiguan:jiguan,
					jieshao:jieshao
				},
				dataType:'json',//服务器返回数据的类型
				success:function(data){//成功时执行该函数，data就是服务器返回的数据
					console.log("服务器返回的数据是：",data)
					//判断，登录成功后，跳转到首页 index.html
					if(data.code==0){
						//跳转到 index.html 页面
						location.href="login.html";
					}else{
						//登录失败
						$("#msg").html(data.msg)//向id是msg的标签，显示文字
					}
				},
				error:function(xhr,textStatus){//错误时执行该函数
					console.log('错误')
					console.log(xhr)
					console.log(textStatus)
				}
			})

		}

	</script>
</head>
<body>
注册<br>

用户名：<input type="text" name="username" id="username"> <span style="color:red;">*</span> <br/>
真实姓名：<input type="text" name="realName" id="realName"> <span style="color:red;">*</span> <br/>
密码：<input type="text" name="password" id="password"> <span style="color:red;">*</span><br/>
确认密码：<input type="text" name="password2" id="password2"> <span style="color:red;">*</span><br/>

性别：<input type="radio" name="sex" checked value="0"> 女
<input type="radio" name="sex" value="1"> 男 <br/>

手机号：<input type="text" name="phone" id="phone"><br/>

爱好：<input type="checkbox" name="likes" value="wzry">王者荣耀
<input type="checkbox" name="likes" value="cj">吃鸡
<input type="checkbox" name="likes" checked value="dy">刷抖音<br/>

籍贯：<select name="jiguan" id="jiguan">
	<option>请选择籍贯</option>
	<option value="beijing">北京</option>
	<option value="jilin">吉林省</option>
</select>	<br/>
自我介绍：<input name="jieshao" id="jieshao"> <br/>


<input type="submit" value="注册" onclick="reg()">
<div id="msg" style="color:red;"></div>
</body>
</html>